<template>
  <div>
    <div class="main">
      <div class="u4-logo-c">
        <div class="u4-logo">
        </div>
      </div>
      <div class="login-form-c">
        <div class="title">
          <span>{{$t("邮箱验证")}}</span>
        </div>
        <div class="auth-code-img-c" style="margin-top: 0px">
          <p >{{$t("请查收邮箱")}}<span style="color: red">{{mail}}</span> {{$t("的邮件")}}</p>
          <el-form :model="ruleForm"  status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm" @submit.native.prevent>
            <el-form-item :label="$t('邮箱')" prop="email" class="el-from-item">
              <el-input type="input" v-model="ruleForm.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 10px" >
              <el-button type="primary" native-type="submit" @click="submitForm('ruleForm')">提交</el-button>
              <el-button type="" @click="toLogin()">{{$t("去登录")}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import apiService from '@/api/apiService';
import Vue from "vue";

export default {
  name: "MailRegister",
  data() {
    var checkEmail = (rule, value, callback) => {
      if(!value){
        return callback(new Error('验证码不能为空'));
      } else {
        callback()
      }
    };
    return {
      userKey: '',
      mailKey: '',
      mail:'',
      ruleForm: {
        code: ''
      },
      rules: {
        code: [
          {validator: checkEmail, trigger: 'blur'}
        ]
      }
    };
  },
  mounted() {
    this.userKey = this.$route.query.userKey
    this.mailKey = this.$route.query.mailKey
    this.mail = this.$route.query.mail
  },
  methods: {
    submitForm(formName) {
      console.log(this.ruleForm.userKey)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const query = {
            userKey: this.userKey,
            mailKey: this.mailKey,
            code:this.ruleForm.code
          }
          apiService.post('/register-mail',query).then(res=>{
            if(res.code === 0){
              this.$message.success(res.data)
              this.$router.push({path: '/qrsceneLogin'})
            }else{
              Vue.prototype.$message.error(res.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  toLogin(){
    this.$router.push({ name: 'login' })
  }
  },
  computed: {},
};
</script>

<style lang="css" scoped>

.main {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#c6c6c6, #7af3fd);
}

.login-form-c {
  box-shadow: 0 0 0 .2rem #00000005;
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 300px;
  border-radius: 10px;
  background: linear-gradient(#7af3fd, #f6f5f5);
  /*background-color: rgba(59, 205, 207, 0.7);*/
}

.title {
  color: white;
  font-weight: bolder;
  font-size: 25px;
  margin-top: 20px;
}

.auth-code-img-c {
  margin: 20px auto 0 auto;
  width: 50%;
}

.auth-code-img {
  margin-top: 10px;
  width: 100%;
  user-select: none;
}

.error-get {
  /*display: flex;*/
  width: 350px;
  height: 350px;
  /*transform: translate(0,-100%);*/
  background-color: rgba(250, 250, 250, 0.5);
}

.refresh {
  border-radius: 50%;
  background-image: url('@/assets/refresh.svg');
  background-size: contain;
  width: 60px;
  height: 60px;
  margin: 100px auto auto;
}

.u4-logo-c {
  width: 400px;
  height: 400px;
  position: fixed;
  overflow: hidden;
}

.u4-logo {
  width: 500px;
  height: 500px;
  background-size: contain;
  background-image: url('@/assets/u4-logo.png');
}

.el-from-item{
  margin-bottom: 7px;
}
.refresh:hover {
  cursor: pointer;
  display: inherit;
}

.vercode-mask {
  /*position: absolute;*/
  left: 0;
  /*top: 0;*/
  width: 137px;
  height: 40px;
  background: #000;
  /*opacity: 0.8;*/
  text-align: center;
  line-height: 40px;
  color: #fff;
}
</style>
